<script lang="ts">
	export default {
		name: 'selectionEngineer',
		description: '选择用户',
	};
</script>

<script setup lang="ts">
	import { ElForm, ElMessage } from 'element-plus';
	import {
		OrderForm,
		OrderQuery,
		Engineer,
		Engineerparmas,
	} from '@/api/order/types';
	import { Search, Refresh } from '@element-plus/icons-vue';
	import {
		casualEngineerList,
		casualOrderEngineerList,
		orderItemAdd,
		orderItemUpadte,
		getByOrderId,
	} from '@/api/order/index';
	import { onMounted, reactive, toRefs } from 'vue';
	const emit = defineEmits(['submitOk']);
	const state = reactive({
		dialog: {
			title: '',
			visible: false,
		} as DialogType,
		//是否点击添加用户
		ifClickAddUser: false,
		//之前是否已经添加过用户
		ifdatalist: false,
		queryParams: {} as Engineerparmas,
		formData: {} as OrderForm,

		userList: [] as Engineer[],
		userLoading: false,
		userQueryParams: {
			pageNum: 1,
			pageSize: 10,
		} as OrderQuery,
		userTotal: 0,

		dataList: [] as Engineer[],
		dataLoading: false,
		dataQueryParams: {
			pageNum: 1,
			pageSize: 10,
		} as OrderQuery,
		dataTotal: 0,
		usertype: '',
	});
	const {
		dialog,
		ifClickAddUser,
		userList,
		userLoading,
		userQueryParams,
		userTotal,
		dataList,
		dataLoading,
		dataQueryParams,
		dataTotal,
		formData,
		queryParams,
		usertype,
		ifdatalist
	} = toRefs(state);

	defineExpose({
		dialog,
		ifClickAddUser,
		formData,
		reset,
	});
	//重载
	function reset() {
		dataLoading.value = true;
		ifdatalist.value = false;
		let params = {
			pageNum: 1,
			pageSize: 10,
		};
		userQueryParams.value = params;
		dataQueryParams.value = params;
		userList.value = [];
		dataList.value = [];
		userTotal.value = 0;
		dataTotal.value = 0;
		if (!formData.value.id) return;
		getByOrderId(formData.value.id).then((res) => {
			if (res.data.length > 0) ifdatalist.value = true
			dataList.value = res.data.map((el : any) => {
				return { ...el, engineerRealname: el.engineerName, id: el.engineerId };
			});
			dataLoading.value = false;
		});
	}
	//指派人员
	function designate() {
		userLoading.value = true;
		usertype.value = 'zp';
		userList.value = []
		ifClickAddUser.value = true;
		let parma = {
			order_id: formData.value.id,
		} as Engineerparmas
		queryParams.value.name ? (parma.name = queryParams.value.name) : '';
		casualOrderEngineerList(parma)
			.then((res : any) => {
				userList.value = resArr(res.data, dataList.value);
				userTotal.value = userList.value.length
			})
			.finally(() => {
				userLoading.value = false;
			});
	}
	//强制指派人员
	function forceDesignate() {
		userLoading.value = true;
		usertype.value = 'qzzp';
		userList.value = []
		ifClickAddUser.value = true;
		let parma = {} as Engineerparmas;
		queryParams.value.name ? (parma.name = queryParams.value.name) : '';
		casualEngineerList(parma)
			.then((res : any) => {
				userList.value = resArr(res.data, dataList.value);
				userTotal.value = userList.value.length
			})
			.finally(() => {
				userLoading.value = false;
			});
	}
	//添加
	function add(row : Engineer) {
		userList.value = userList.value.filter((el : any) => el.id != row.id);
		dataList.value.push(row);
	}
	//移除
	function del(row : Engineer) {
		dataList.value = dataList.value.filter((el : any) => el.id != row.id);
		userList.value.push(row);
	}
	//数组去重
	function resArr(arr1 : Engineer[], arr2 : Engineer[]) {
		return arr1.filter((v : Engineer) =>
			arr2.every((val : Engineer) => val.id != v.id)
		);
	}
	//确定
	function submitForm() {
		let parma = {
			order_id: formData.value.id,
			engineer_ids: dataList.value
				.map((el : Engineer) => {
					return el.id;
				})
				.toString(),
		};
		if (ifdatalist.value) {
			orderItemUpadte(parma).then(() => {
				ElMessage.success('修改成功');
				dialog.value.visible = false;
			});
		} else {
			orderItemAdd(parma).then(() => {
				ElMessage.success('添加成功');
				dialog.value.visible = false;
			});
		}
	}
	//取消
	function cancel() {
		dialog.value.visible = false;
	}
	//搜索
	function handleQuery() {
		if (usertype.value == 'zp') {
			designate();
		}
		if (usertype.value == 'qzzp') {
			forceDesignate();
		}
	}
	//重置
	function resetQuery() {
		queryParams.value = {}
		userList.value = [];
		handleQuery();
	}

	onMounted(() => { });
</script>

<template>
	<el-dialog :title="dialog.title" v-model="dialog.visible" :width="ifClickAddUser ? '1200px' : '600px'"
		destroy-on-close @close="cancel">
		<div style="display: flex; justify-content: space-around">
			<el-card v-if="ifClickAddUser">
				<template #header> 可添加人员： </template>
				<el-form :model="queryParams" :inline="true">
					<el-form-item label="姓名" prop="typeId">
						<el-input v-model="queryParams.name" placeholder="请输入姓名" clearable style="width: 200px" />
					</el-form-item>

					<el-form-item>
						<el-button type="primary" :icon="Search" @click="handleQuery">搜索</el-button>
						<el-button :icon="Refresh" @click="resetQuery">重置</el-button>
					</el-form-item>
				</el-form>
				<el-table ref="dataTableRef" v-loading="userLoading" :data="userList" highlight-current-row border height="250">
					<el-table-column label="姓名" prop="engineerRealname" width="150" />
					<el-table-column label="性别" prop="engineerSexName" min-width="150" />
					<el-table-column label="手机号" prop="phone" width="160" />
					<el-table-column label="操作" fixed="right" width="70">
						<template #default="scope">
							<el-button type="success" link @click.stop="add(scope.row)">
								添加
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-card>
			<el-card>
				<template #header>
					<el-button type="success" @click="designate">指派人员</el-button>
					<el-button type="success" @click="forceDesignate">强制指派人员</el-button>
				</template>

				<el-table ref="dataTableRef" v-loading="dataLoading" :data="dataList" highlight-current-row border  height="250">
					<el-table-column label="姓名" prop="engineerRealname" width="150" />
					<el-table-column label="性别" prop="engineerSexName" min-width="150" />
					<el-table-column label="手机号" prop="phone" width="160" />
					<el-table-column label="操作" fixed="right" width="70">
						<template #default="scope">
							<el-button type="danger" link @click.stop="del(scope.row)">
								移除
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-card>
		</div>
		<template #footer>
			<div class="dialog-footer">
				<el-button type="primary" @click="submitForm">确 定</el-button>
				<el-button @click="cancel">取 消</el-button>
			</div>
		</template>
	</el-dialog>
</template>
